Vue.component("yc-upload", {
    props: ["isMultiple", "accessType", "actionUrl", "accessSize", "uploadData"],
    template: `
      <div>
          <el-button type="primary" size="small" @click="showDialog(true)">文件上传</el-button>
          <div class="mosh" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: rgba(0,0,0,0.5);z-index: 4;" @click="showDialog(false)" v-show="dialogVisit"></div>
          <div class="upload-box" style="width: 680px;min-height: 400px;max-height: 500px;box-sizing: border-box;border-radius: 3px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #fff;z-index: 10;" v-show="dialogVisit">
            <div class="upload-box-title" style="width: 100%;height: 60px;border-bottom: 1px solid #ccc;font-size: 20px;display: flex;justify-content: space-between;">
              <div class="title-content" style="margin: 16px;">上传文件</div>
              <div class="title-icon" style="margin: 16px;"><i style="cursor: pointer;" class="el-icon-close" @click="showDialog(false)"></i></div>
            </div>
            <div class="upload-box-content" style=" margin: 10px 20px;">
              <el-alert
                  style="background-color: #EAF0FC;margin-bottom: 16px;"
                  title=""
                  type="info"
                  :closable="alertClose"
                  show-icon>
                <template slot="title">
                  只允许上传这些文件类型：
                  <el-tag style="margin: 0 3px;" type="warning" v-for="(item,index) in types" :key="index">{{item}}</el-tag>
                  。 单个文件不超过：
                  <el-tag style="margin: 0 3px;" type="danger">{{accessSize/1024/1024}}M</el-tag>
                </template>
              </el-alert>
              <el-upload
                  class="upload-demo"
                  style="min-height: 200px;max-height: 300px;overflow-y: auto;overflow-x: hidden;margin: 0 20%;"
                  drag
                  with-credentials
                  ref="upload"
                  show-file-list
                  :data="uploadData"
                  :before-upload="beforeUpload"
                  :on-success="uploadSuccess"
                  :on-error="uploadError"
                  :file-list="fileList"
                  :accept="accessType"
                  :action="actionUrl"
                  :auto-upload="autoUpload"
                  :multiple="isMultiple">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </div>
            <el-button style="float: right;margin-right: 20px;margin-bottom: 10px;" size="small" type="primary" @click="submitUpload">确 定</el-button>
            <el-button style="float: right;margin-right: 20px;margin-bottom: 10px;" size="small" @click="showDialog(false)" >取 消</el-button>
          </div>
          
      </div>
    `,
    data(){
        return {
            dialogVisit: false,
            alertClose: false,
            autoUpload: false,
            fileList: [],
            types: this.accessType.split(",")
        }
    },
    methods: {
        showDialog(value){
            this.dialogVisit = value;
            if( !value ){
                this.fileList = [];
            }
        },
        submitUpload(){
            this.$refs.upload.submit();
        },
        uploadError(err){
            this.$message.error("文件上传失败，请联系管理员");
        },
        uploadSuccess(response, file, filelist){
            this.$message.success("文件上传成功");
            this.showDialog(false);
        },
        beforeUpload(file){
            const fileSuffix = file.name.substring(file.name.lastIndexOf("."));
            const fileSize = file.size;
            const whiteList = this.accessType.split(",");
            whiteList.forEach(item=>{
                item = item.trim();         //去掉空格，防止这样写：  .zip, .ppt
            });

            if( whiteList.indexOf( fileSuffix ) === -1 ){
                this.$message.error("上传文件只能是：" + this.accessType);
                return false;
            }
            if( fileSize > this.accessSize ){
                this.$message.error("上传文件大小不能超过：" + this.accessSize / 1024 / 1024 + "M");
                return false;
            }
        }
    }
});

/*
*
<yc-upload :upload-data="null" :is-multiple="true" :access-size="1024*1024*8"
access-type=".zip,.ppt" action-url="https://jsonplaceholder.typicode.com/posts/"></yc-upload>
:is-multiple   true多文件  false单文件
access-type  允许上传的文件类型 字符串
action-url  上传文件的地址 字符串
:access-size  单个文件上传大小限制 数值
:upload-data 请求的额外携带参数，对象
后端，文件对应的键是 file
*
* */